
<template>
  <div class="main-container">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>工艺路线管理</el-breadcrumb-item>
        <el-breadcrumb-item>生产通知</el-breadcrumb-item>
        <el-breadcrumb-item>投产工艺路线</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 产品信息 和 操作按钮 -->
    <div class="product-button">
      <el-row class="mb20 ml10">
        <el-col :span="12">
          <el-col :span="6">
            <label for="drawingNumber">图号</label>
            <div class="inline-label ml10" name="drawingNumber">
              {{ basics.drawingNumber || '图号' }}
            </div>
          </el-col>
          <el-col :span="6">
            <label for="productName">品名</label>
            <div name="productName" class="inline-label ml10">
              {{ basics.productName || '品名' }}
            </div>
          </el-col>
          <el-col :span="6">
            <label for="materialQuality">材质</label>
            <div name="materialQuality" class="inline-label ml10">
              {{ basics.materialQuality || '材质' }}
            </div>
          </el-col>
          <el-col :span="6">
            <label for="number">数量</label>
            <div name="number" class="inline-label ml10">{{ basics.number || '0' }}</div>
          </el-col>
        </el-col>

        <el-col :span="11">
          <el-col :span="24">
            <el-button id="btnC7Confirm" type="primary" @click="onConfirm">确认设计</el-button>
            <el-button @click="onCancel">取 消</el-button>
            <el-button @click="onCancel">返 回</el-button>
            <el-button id="btnC7CreateVersion" type="primary" icon="el-icon-plus" @click="createProcess" v-if="$checkAuth('修改工艺路线')">新建工艺版本</el-button>
          </el-col>
        </el-col>
      </el-row>
    </div>
    <!-- 工艺版本选择器 -->
    <div class="flex justify-space-between">
      <div class="w-50percent border-x mr10">
        <el-collapse v-model="activeVersion" @change="handleChange" accordion v-if="versionList.length > 0">
          <template v-for="(item, index) in versionList">
            <el-collapse-item :name="index" :key="index" class="p10-x">
              <template slot="title">
                <div class="justify-space-between flex w-100percent">
                  <span>&nbsp;&nbsp;版本: {{ item.versionName }}&nbsp;&nbsp;备注:{{ item.remark }} </span>
                </div>
                <i class="iconfont icon-xiugai1 fontSize14 pr15" @click.stop="editProcess(index)" v-if="$checkAuth('修改工艺路线')"></i>
              </template>
              <el-table :data="item.processList" stripe border>
                <el-table-column prop="sequenceNumber" label="序号" min-width="80" align="center"> </el-table-column>
                <el-table-column prop="processName" label="工序" min-width="80" align="center"> </el-table-column>
                <el-table-column prop="single" label="单机" min-width="80" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.department == '加工'">{{ scope.row.single ? '单机' : '双机' }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="department" label="部门" align="center" min-width="80"></el-table-column>
                <el-table-column prop="quotaHour" label="调试工时" align="center" min-width="80"></el-table-column>
                <el-table-column prop="debugHour" label="定额工时" align="center" min-width="80"></el-table-column>
              </el-table>
            </el-collapse-item>
          </template>
        </el-collapse>
        <div v-else>
          <no-data placeholder="这里还没有数据哦，快去新建工艺版本吧~"></no-data>
        </div>
      </div>
      <div class="flex justify-space-around flex__item">
        <div class="flex__item border">
          <el-tag class="w-100percent">未选工艺版本</el-tag>
          <div class="flex-column mb10 mt10">
            <template v-for="(item, index) in noChooseVersionList">
              <div
                :id="'itemC7Version' + item.versionName"
                :key="index"
                class="border p-10 cursor-pointer unselected"
                @click="curChooseVersionId = item.versionId"
                :class="curChooseVersionId == item.versionId ? 'choose-color' : ''"
              >
                <span>{{ item.versionName }}</span>
                <span class="fr mr5">{{ item.versionState }}</span>
              </div>
            </template>
          </div>
        </div>
        <div class="flex-column justify-content-center ml10 mr10">
          <i id="btnC8ShiftRight" class="el-icon-d-arrow-right mb10 bold" @click="gotoRight"></i>
          <i id="btnC7ShiftLeft" class="el-icon-d-arrow-left bold" @click="gotoLeft"></i>
        </div>
        <div class="flex__item border">
          <el-tag type="success" class="w-100percent">已选工艺版本</el-tag>
          <div class="flex-column mb10 mt10">
            <template v-for="(item, index) in chooseVersionList">
              <div
                :id="'itemC7Version' + item.versionName"
                :key="index"
                class="border p-10 cursor-pointer selected"
                @click="curChooseVersionId = item.versionId"
                :class="curChooseVersionId == item.versionId ? 'choose-color' : ''"
              >
                <span>{{ item.versionName }}</span>
                <span class="fr mr5">{{ item.versionState }}</span>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>

    <add-dialog ref="addDialog" @update="getProcessList()"></add-dialog>
    <edit-dialog ref="editDialog" @update="getProcessList()"></edit-dialog>
  </div>
</template>

<script lang="ts">
import { getProcessDetail, designProcess } from '@/api/process'
import { Notification } from 'element-ui'
import AddDialog from './add_process_dialog.vue'
import EditDialog from '../process/addProcessDetailDialog.vue'
import _ from 'lodash'
import { Component, Vue, Watch } from 'vue-property-decorator'

import { State, namespace } from 'vuex-class'

const vuexProcess = namespace('TwoProcess')

@Component({
  components: {
    AddDialog,
    EditDialog
  }
})
export default class DesignProcess extends Vue {
  // 设计工艺投产对应的产品信息
  @vuexProcess.State productOnDesignVersion: any

  public $refs!: {
    addDialog: any
    editDialog: any
  }

  visible = false
  readOnly: boolean = true
  basics: any = {
    drawingNumber: '图号图号图号图号',
    productName: '品名品名品名品名',
    materialQuality: '材质材质材质材质',
    remark: '',
    number: '0'
  }
  versionList: any = []
  activeVersion: any = null
  productId: any = null
  chooseVersionList: any = [] // 已选工艺版本
  noChooseVersionList: any = [] // 未选工艺版本
  curChooseVersionId: any = null
  originChooseId: any = [] // 后端的初始已选工艺版本
  type = '' // "产品通知" "工装品" "返修品

  // 路由返回上一级
  onCancel() {
    this.curChooseVersionId = null
    this.$router.go(-1)
  }

  /**
   * 生命周期函数
   */
  created() {
    console.log('进入工艺设计详情页面')
    console.log(this.productOnDesignVersion)
    this.basics = this.productOnDesignVersion
    this.productId = this.basics.producingId
    console.log(this.basics.remark)

    this.getProcessList()

    this.visible = true
  }
  async getProcessList() {
    let res = await getProcessDetail({ producingId: this.productId })
    if (res) {
      this.versionList = res.data
      console.log(this.versionList)

      // 设置row-key
      this.versionList = this.versionList.map(vItem => {
        vItem.processList = vItem.processList.map((pItem, pIndex) => {
          this.$set(pItem, 'sid', 'a' + pIndex)
          if (pItem.equipmentList) {
            pItem.equipmentList = pItem.equipmentList.map((eItem, eIndex) => {
              this.$set(eItem, 'sid', 'b' + pIndex + eIndex)
              return eItem
            })
          }
          return pItem
        })
        return vItem
      })
      this.chooseVersionList = this.versionList.filter(item => {
        return item.versionState
      })
      this.originChooseId = this.chooseVersionList.map(item => {
        return item.versionId
      })
      this.noChooseVersionList = this.versionList.filter(item => {
        return !item.versionState
      })
    }
  }

  createProcess() {
    this.$refs.addDialog.open(this.basics.drawingNumber)
  }

  async editProcess(index) {
    let process = this.versionList[index]
    console.log('从设计跳转修改工艺版本，即将跳转......')
    console.log(process)
    this.$store.commit('TwoProcess/SET_PRODUCT_ON_MODIFY_VERSION', process)
    // TODO
    this.$router.push({
      name: 'add-process-detail',
      params: {
        inType: '2'
      }
    })
    // let getdata = await this.$store.dispatch('TwoProcess/PREDATA_VERSION', { versionId: process.versionId })
    // let getversion = await this.$store.dispatch('TwoProcess/GET_VERSION', { versionId: process.versionId })
    // if (getdata && getversion) {
    //   this.$refs.editDialog.openEdit(process.versionId, process.versionName, process.drawingNumber, process.productName)
    // }
  }

  gotoLeft() {
    let version = this.chooseVersionList.find(item => {
      return item.versionId == this.curChooseVersionId
    })
    let Index = this.chooseVersionList.findIndex(item => {
      return item.versionId == this.curChooseVersionId
    })
    if (version) {
      if ([null, '待审核', '审核未通过'].includes(version.versionState)) {
        this.noChooseVersionList.push(version)
        this.chooseVersionList.splice(Index, 1)
      } else {
        this.$message('只能移除[待审核][审核未通过]的工艺版本')
      }
    } else {
      this.$message('请先选择工艺版本')
    }
  }
  gotoRight() {
    let version = this.noChooseVersionList.find(item => {
      return item.versionId == this.curChooseVersionId
    })
    let Index = this.noChooseVersionList.findIndex(item => {
      return item.versionId == this.curChooseVersionId
    })
    if (version) {
      this.chooseVersionList.push(version)
      this.noChooseVersionList.splice(Index, 1)
    }
  }
  handleChange() {}

  async onConfirm() {
    let ids = this.chooseVersionList.map(item => {
      return item.versionId
    })
    // 确认被设计的工艺版本不为空
    if (!_.isEmpty(ids)) {
      let res = await designProcess({ producingId: this.productId, versionIdList: ids }).catch(err => {
        this.$notify({
          title: '错误提醒',
          message: err
        })
      })
      if (res) {
        this.curChooseVersionId = null
        this.visible = false
        this.$router.go(-1)
      }
    } else {
      this.curChooseVersionId = null
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.process-design-page {
  border-top: 1px solid #dbd8d8;
  border-left: 1px solid #dbd8d8;
  padding: 5px 10px 0 10px;
  height: 100%;
  .product-button {
    margin-top: 20px;
  }
}
.choose-color {
  background-color: #fb8989;
}
</style>
